import React from 'react';
import {connect} from 'react-redux';
import {
    Text,
    ScrollView,
    View,
    StyleSheet,
    Image,
    Alert,
    Button,
    TouchableOpacity,
    InteractionManager,
} from 'react-native';
import styles from './styles';
import themeconfig from '../../config/theme';
import CLNavigatorHeader from '../../component/CLNavigatorHeader';
import {getDetailAction, resetState} from './actions';
import {toast} from '../../utils/NativeUtil';
import {naviPush} from '../../navigatorApp/actions';
import {getAuthInfo} from '../shop/actions';
import { gotoCert } from '../main/actions';


class income extends React.Component {

    static navigationOptions = ({navigation, screenProps}) => ({
        header: <CLNavigatorHeader navigation={navigation} title="收入"/>,
    });

    constructor(props) {
        super(props);
    }

    componentDidMount() {
        InteractionManager.runAfterInteractions(() => {
            this.props.resetState();
            this.props.getDetail(this.props.token);
            this.props.getAuthInfo(this.props.token);
        });
    }

    //提现申请
    applyCrashClick = () => {
        if (this.props.auditStatus == 1) {
            if (this.props.activeAmount > 0) {
                this.props.naviPush("applycrash", {token: this.props.token})
            } else {
                toast('可提现金额不足');
            }
        } else {
            let authResult = undefined;
            if (this.props.auditStatus == -1 || this.props.auditStatus == -2) {
                authResult = '您还未通过实名认证';
                Alert.alert('温馨提醒', authResult, [
                    {text: '取消', onPress: () => console.log('cancel')},
                    {text: '去认证', onPress: () => this.toAuth()}
                ]);
            } else if (this.props.auditStatus == 0) {
                authResult = '认证中，请耐心等待!';
                Alert.alert('温馨提醒', authResult, [
                    {text: '取消', onPress: () => console.log('cancel')}
                ]);
            }
        }
    };

    //我的账号
    myAccountClick = () => {
        this.props.naviPush("myaccount", {title: '我的账号'})
    };

    //提现记录
    recordClick = () => {
        this.props.naviPush("applyrecord", {});
    };

    //交易明细
    transactionClick = () => {
        this.props.naviPush("transationList", {})
    };

    toAuth = () => {
        this.props.gotoCert(true);
        this.props.naviPush("shopAuth", {});
    };


    render = () => {
        let authView = null;
        let authResult = undefined;
        if (this.props.auditStatus == -1 || this.props.auditStatus == -2) {
            authResult = '您还未通过实名认证';
            authView = (
                <View style={{flexDirection: 'row', marginTop: 8, alignItems: 'center'}}>
                    <TouchableOpacity onPress={() => Alert.alert('温馨提醒', authResult, [
                        {text: '取消', onPress: () => console.log('cancel')},
                        {text: '去认证', onPress: () => this.toAuth()}
                    ])}>
                        <Image source={require('../../image/icon_warn.png')}
                               style={{width: 22, height: 20, marginRight: 8}}/></TouchableOpacity>
                    <Text style={{color: 'white',}}>{authResult}</Text>
                </View>);
        } else if (this.props.auditStatus == 0) {
            authResult = '认证中，请耐心等待!';
            authView = (
                <View style={{flexDirection: 'row', marginTop: 8, alignItems: 'center'}}>
                    <TouchableOpacity onPress={() => Alert.alert('温馨提醒', authResult, [
                        {text: '取消', onPress: () => console.log('cancel')}
                    ])}>
                        <Image source={require('../../image/icon_warn.png')}
                               style={{width: 22, height: 20, marginRight: 8}}/></TouchableOpacity>
                    <Text style={{color: 'white',}}>{authResult}</Text>
                </View>);
        } else if (this.props.auditStatus == 1) {
            authResult = '';
        }


        return (<ScrollView style={{flex: 1, backgroundColor: '#ebebeb'}}>
                <View style={styles.top}>
                    <View style={{marginLeft: 15, marginRight: 15, height: 150, alignItems: 'center',}}>
                        <Text style={styles.top_txt}>可提现</Text>
                        <Text style={styles.top_price}>{this.props.activeAmount}</Text>
                        <TouchableOpacity onPress={this.applyCrashClick}
                                          style={{marginTop: 10}}>
                            <View style={{
                                width: 160,
                                height: 30,
                                borderRadius: 15,
                                justifyContent: 'center',
                                backgroundColor: 'white',
                                alignItems: 'center',
                                flexDirection: 'column',
                            }}>
                                <Text style={{color: themeconfig.maincolor, fontSize: 16}}>立即提现</Text>
                            </View>
                        </TouchableOpacity>
                        {authView}
                    </View>
                </View>
                <View style={styles.itemBar}>
                    <Text>总金额</Text>
                    <Text style={{color: themeconfig.themeconfig}}>{this.props.totalAmount}</Text>
                </View>
                <View style={{backgroundColor: '#cfcfcf', height: 1}}/>
                <View style={styles.itemBar}>
                    <Text>提现中</Text>
                    <Text style={{color: themeconfig.maincolor}}>{this.props.frozenAmount}</Text>
                </View>
                <View style={{backgroundColor: '#cfcfcf', height: 1}}/>
                <View style={styles.itemBar}>
                    <Text>订单金额</Text>
                    <Text style={{color: themeconfig.maincolor}}>{this.props.amount}</Text>
                </View>

                <TouchableOpacity
                    underlayColor='rgba(255,255,255,0)'
                    onPress={this.myAccountClick}>
                    <View style={[styles.itemBar, {marginTop: 10}]}>
                        <Text>我的账号</Text>
                        <Image style={{width: 20, height: 20}} source={require('../../image/img_right_grey.png')}/>
                    </View>
                </TouchableOpacity>
                <View style={{backgroundColor: '#cfcfcf', height: 1}}/>
                <TouchableOpacity
                    onPress={this.recordClick}>
                    <View style={styles.itemBar}>
                        <Text>提现记录</Text>
                        <Image style={{width: 20, height: 20}} source={require('../../image/img_right_grey.png')}/>
                    </View>
                </TouchableOpacity>
                <View style={{backgroundColor: '#cfcfcf', height: 1}}/>
                <TouchableOpacity
                    onPress={this.transactionClick}>
                    <View style={styles.itemBar}>
                        <Text>交易明细</Text>
                        <Image style={{width: 20, height: 20}} source={require('../../image/img_right_grey.png')}/>
                    </View>
                </TouchableOpacity>
            </ScrollView>
        )
    }
}

const mapStateToProps = (state) => {
    return ({
        token: state.mainmodel.token,
        activeAmount: (state.income.activeAmount / 100).toFixed(2),
        frozenAmount: (state.income.frozenAmount / 100).toFixed(2),
        totalAmount: (state.income.totalAmount / 100).toFixed(2),
        amount: (state.income.amount / 100).toFixed(2),
        auditStatus: state.shop.auditStatus
    });
};

const mapDispatchToProps = (dispatch) => {
    return {
        getDetail: (token) => {
            dispatch(getDetailAction(token));
        },
        naviPush: (routeName, params) => {
            dispatch(naviPush(routeName, params))
        },
        getAuthInfo: (token) => {
            dispatch(getAuthInfo(token))
        },
        resetState: () => {
            dispatch(resetState())
        },
        gotoCert:(value) => {
            dispatch(gotoCert(value));
        }
    }
};

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(income);
